<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Theme Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/theme-document.css">
</head>
<body>
    <div class="layui-main">
        <p class="layui-elem-quote">
            LayuiAdmin 内置多种主题，皆由 Layui 风格演变而来，但是主题的渲染依赖现有的页面结构
        </p>
        <div class="theme">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>页面结构</legend>
            </fieldset>
            <pre class="layui-code" lay-title="HTML结构" lay-encode="true">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"></div>
        <div class="layui-shrink-sidebar layui-layout-left">
            <i class="fa fa-bars"></i>
        </div>    
        <ul class="layui-nav layui-layout-right" lay-filter="navbar"></ul>
    </div>
    
    <div class="layui-side">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="side"></ul>
        </div>
    </div>
    
    <div class="layui-tab" lay-allowClose="true" lay-filter="content">
        <ul class="layui-tab-title">
            <li class="layui-this">后台介绍</li>
        </ul>
        <div class="page-operat">
            <ul class="layui-nav">
                <li class="layui-nav-item">
                    <a href="javascript:;">页面操作</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="javascript:;" class="layui-reload">刷新页面</a></dd>
                        <dd><a href="javascript:;" class="layui-close-othertab">关闭其他</a></dd>
                        <dd><a href="javascript:;" class="layui-close-alltab">关闭所有</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-body layui-tab-content">
            <div class="layui-tab-item layui-show">
                <iframe src="" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
            </pre>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>快速使用</legend>
            </fieldset>
            <p>
                当保证了上述页面结构的情况下，在页面中找到这三个容器（.layui-header || .layui-side || .layui-tab）,并在其中添加主题类名，内置的主题类名如（layui-theme-default | layui-theme-blue | layui-theme-molv | layui-theme-cyan | layui-theme-black）
            </p>
            <pre class="layui-code" lay-title="HTML结构" lay-encode="true">
<div class="layui-header layui-theme-default"></div>
<div class="layui-side layui-theme-default"></div>
<div class="layui-tab layui-theme-default"></div>  
            </pre>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>自定义主题</legend>
            </fieldset>
            <p>
                可能现有的主题不能满足你的需求，你可以自定义主题。由于主题样式都存在于css文件theme.css中，找到文件，如下新增(提示：主题是由两种接近的色值定制的)
            </p>
            <pre class="layui-code" lay-title="CSS结构" lay-encode="true">
/* LayuiAdmin test theme --- layui-header */
.layui-layout-admin .layui-theme-test {
    background-color: #36bbae;
}
.layui-layout-admin .layui-theme-test .layui-logo {
    background-color: #009688!important;
}
.layui-layout-admin .layui-theme-test .layui-shrink-sidebar:hover {
    background-color: #009688;
}
.layui-theme-test .layui-nav .layui-nav-item:hover {
    background-color: #009688;
}

/* LayuiAdmin test theme --- layui-side */

.layui-theme-test .layui-nav {
        background-color: #36bbae;
}
.layui-theme-test .layui-nav dd.layui-this a {
    background-color: #009688;
}
.layui-theme-test .layui-nav li.layui-this a {
    background-color: #009688;
}
.layui-theme-test .layui-nav-tree .layui-nav-bar {
    background-color: #009688;
}
.layui-theme-test .layui-nav-tree .layui-nav-child dd:hover {
    background-color: #009688;
}
.layui-theme-test .layui-nav-tree .layui-nav-child dd.layui-this {
    background-color: #009688;
}
.layui-theme-test .layui-nav-tree li.layui-this {
    background-color: #009688;
}

/* LayuiAdmin test theme --- layui-tab */

.layui-theme-test .layui-tab-title .layui-this {
    background: #009688;
} 
            </pre>   
        </div>
    </div>
    <script src="../layui/layui.js"></script>
    <script src="../js/theme-document.js"></script>
</body>
</html>